<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" :collapse="true" @filterChange="changeHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="300px"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      columnsRef="lxjshhftask"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="onRowSelectChange"
    ></FilterTable>
    <div style="margin-top:20px">
      <FormPanel ref="formPanel" :list="formList" :cols="3" :labelWidth="110" :formType="type" :isSubmitBtn="false" @formChange="formChangeHandle" />
    </div>
    <div style="margin-top:10px;text-align:center">
      <el-button type="primary" @click="openDistribution">任务分派</el-button>
    </div>
    <!-- 维修历史-->
    <Drawer :visible.sync="visible" :title="this.title" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <repairHistory ref="repairHistory" :getdata="repairHistoryData" @close="close"></repairHistory>
    </Drawer>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import repairHistory from '@/pages/repair/business/customer/Repairhistory/historypop.vue';
import { getSaleVisitInfo, allotVisit, searchRoleByCodes } from '@/api/customerCare/visitAllocation/getVisitInfo';
import { searchBrand, searchSeries, searchModel } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import dictCode from '@/utils/dictCode';

export default {
  name: 'taskDis',
  components: {
    repairHistory
  },
  mixins: [dictionary],
  data() {
    this.saveData = {};
    this.BaseTable = null;
    this.type = '';
    this.saveData = {};
    this.allData = {};
    this.title = '';
    return {
      formList: this.createFormList(),
      topFilterList: this.createTopFilterList(),
      fetchApi: getSaleVisitInfo,
      fetchParams: { xhrAbort: true, all: '1' },
      columns: this.createTableColumns(),
      visible: false,
      selectFlag: false,
      flag: false,
      repairHistoryData: {} // 维修历史数据
    };
  },
  created() {
    this.getDcrcAdvisor();
    // this.getBrand();
    // this.getAllUser();
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '客户编号',
          fieldName: 'ownerNo'
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'ownerName'
        },
        // {
        //   type: 'RANGE_DATE',
        //   label: '出库日期',
        //   style: { minWidth: '220px' },
        //   fieldName: 'cjrqBeginDate|cjrqEndDate',
        //   valueFormat: 'yyyy-MM-dd'
        // },
        // {
        //   type: 'RANGE_DATE',
        //   label: '要求完成日期',
        //   style: { minWidth: '220px' },
        //   fieldName: 'cjrqBeginDate1|cjrqEndDate1',
        //   valueFormat: 'yyyy-MM-dd'
        // },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '客户名称',
          dataIndex: 'ownerName',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户移动电话',
          dataIndex: 'mobile',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '所属人',
        //   dataIndex: 'SSR',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        // {
        //   title: '车系名称',
        //   dataIndex: 'CXIMC',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '车型名称',
          dataIndex: 'modelName',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售顾问',
          dataIndex: 'salesConsultant',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '提车日期',
        //   dataIndex: 'TCRQ',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        //   dateFormat: 'yyyy-MM-dd'
        // },
        // {
        //   title: '成交日期',
        //   dataIndex: 'CJRQ',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        //   dateFormat: 'yyyy-MM-dd'
        // },
        {
          title: '证件号码',
          dataIndex: 'certificateNo',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    createFormList() {
      return [
        {
          type: 'MULTIPLE_SELECT',
          label: '跟踪员',
          fieldName: 'tracerList',
          placeholder: '请选择',
          itemList: [],
          rules: [{ required: true, message: '请选择跟踪员', trigger: 'blur' }]
        }
      ];
    },
    // 所有用户
    // async getAllUser() {
    //   const res = await getAllUser();
    //   this.columns.find(item => item.dataIndex === 'tracerList').editItems = res.data.map(x => ({ value: x.userId + '', text: x.employeeName }));
    //   // this.columns.find(item => item.dataIndex === 'SERVICE_ADVISOR').editItems = res.data.map(x => ({ value: x.userId + '', text: x.employeeName }));
    //   // this.columns.find(item => item.dataIndex === 'OBLIGATED_OPERATOR').editItems = res.data.map(x => ({ value: x.userId + '', text: x.employeeName }));
    //   // this.columns.find(item => item.dataIndex === 'TECHNICIAN_LIST').editItems = res.data.map(x => ({ value: x.userId + '', text: x.employeeName }));
    // },
    // dcrc客服专员 跟踪员
    async getDcrcAdvisor() {
      let roleParm = {
        role: dictCode.CUSTOMER_SERVICE_SPECIALIST
      };
      const res = await searchRoleByCodes(roleParm);
      this.formList.find(item => item.fieldName === 'tracerList').itemList = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
    },
    // 清空下拉框表当控件的值和下拉列表
    clearFormItem(item) {
      item.initialValue = undefined;
      item.itemList = [];
    },
    formChangeHandle(val) {
      this.flag = true;
      this.saveData = val;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false, all: '1' });
    },
    collapseHandle() {},
    // 任务分派
    async openDistribution() {
      if (!this.selectFlag) {
        this.$message({
          type: 'warning',
          message: '请选中一行数据!'
        });
      } else {
        this.flag = true;
        // 提交表单数据
        const [err, data] = await this.$refs.formPanel.GET_FORM_DATA();
        if (err) return;
        let ss = this.allData.map(x => x.returnVisitInfoId);
        if (this.flag) {
          let res = {};
          let pram = {
            ...data,
            roIdList: this.allData.map(x => x.returnVisitInfoId)
          };
          res = await allotVisit(pram);
          if (res.resultCode != 200) {
            this.$message({
              type: 'error',
              message: '保存出错!'
            });
          } else {
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            this.fetchParams = { ...this.fetchParams };
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请选择跟踪员!'
          });
        }
      }
    },
    // 选中事件
    onRowSelectChange(val) {
      if (val.length == 0) {
        this.selectFlag = false;
        this.allData = [];
      } else {
        this.selectFlag = true;
        this.allData = val;
      }
    },
    close(val) {
      this.visible = val;
    }
  }
};
</script>
